<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="500px"
    title="拆分单"
    :style="{ top: '20px' }"
    destroy-on-close
  >
    <div v-if="visible" v-loading="loading">
      <a-form
        ref="form"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
        :model="formData"
        :rules="rules"
      >
        <a-form-item label="仓库名称">
          {{ product.scName }}
        </a-form-item>
        <a-form-item label="商品编号">
          {{ product.productCode }}
        </a-form-item>
        <a-form-item label="商品名称">
          {{ product.productName }}
        </a-form-item>
        <a-form-item label="商品分类">
          {{ product.categoryName }}
        </a-form-item>
        <a-form-item label="商品品牌">
          {{ product.brandName }}
        </a-form-item>
        <a-form-item label="库存单位">
          <unit-selector :value="product.unitId" read-only />
        </a-form-item>
        <a-form-item label="库存数量">
          {{ product.stockNum }}
        </a-form-item>
        <a-form-item label="目标单位" name="toUnitId">
          <product-unit-select v-model:value="formData.toUnitId" :product-id="product.productId" />
        </a-form-item>
        <a-form-item label="拆分数量" name="decomposeNum">
          <a-input-number
            style="width: 100%"
            :max="product.stockNum"
            v-model:value="formData.decomposeNum"
          />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <div class="form-modal-footer">
        <a-space>
          <a-button type="primary" :loading="loading" html-type="submit" @click="submit">
            保存
          </a-button>
          <a-button :loading="loading" @click="closeDialog">取消</a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
  // this对象
  import { getCurrentInstance, ref } from 'vue';
  import * as api from '@/api/sc/stock/product-stock';
  import UnitSelector from '@/components/Selector/src/UnitSelector.vue';
  import ProductUnitSelect from '@/views/base-data/unit/product-unit-select/index.vue';

  const instance = getCurrentInstance();

  const emit = defineEmits(['confirm', 'close']);

  const visible = ref(false);

  // 加载中
  const loading = ref(false);

  const props = defineProps({
    product: {
      type: Object,
      required: true,
    },
  });

  const form = ref();

  const formData = ref({
    toUnitId: null,
    decomposeNum: null,
  });

  const rules = ref({
    toUnitId: [{ required: true, message: '请选择目标单位' }],
    decomposeNum: [{ required: true, message: '请填写拆分数量' }],
  });

  const initFormData = () => {
    formData.value = {
      toUnitId: null,
      decomposeNum: null,
    };
  };

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
    initFormData();
  };

  // 数据提交
  const submit = async () => {
    form.value.validate().then(() => {
      loading.value = true;
      api
        .decompose({
          scId: props.product.scId,
          productId: props.product.productId,
          unitId: props.product.unitId,
          toUnitId: formData.value.toUnitId,
          decomposeNum: formData.value.decomposeNum,
        })
        .then(() => {
          _This().$message.success('拆分成功');
          emit('confirm');
        })
        .finally(() => (loading.value = false));
    });
  };

  // 关闭对话框
  const closeDialog = () => {
    visible.value = false;
    emit('close');
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
